<template>
    <div class="login">
        <div class="header">
            <i @click="gohome"></i>
            <div class="goreg" @click="goreg">注册</div>
        </div>
        <div class="login_box">
            <div class="login_titile">手机号密码登录</div>
            <div class="login_from">
                <div class="text">
                    <span>+86</span>
                    <input type="text" v-model="username" placeholder="请输入手机号" />
                </div>
                <div class="password">
                    <input type="password" v-model="password" placeholder="请输入密码" />
                </div>
            </div>
            <div class="login_btn active" @click="login">登录</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            username: "",
            password: "",
            flag: false,
            users: "",
        };
    },
    methods: {
        gohome() {
            this.$router.push({
                path: "/",
            });
        },
        goreg() {
            this.$router.push({
                path: "/register",
            });
        },
        login() {
            this.users = localStorage.users;
            this.flag = false;
            if (this.users != undefined) {
                let usersArr = this.users.split(",");
                for (let i = 0; i < usersArr.length; i++) {
                    let userName = usersArr[i].split("-")[0];
                    let userPwd = usersArr[i].split("-")[1];
                    if (userName == this.username && userPwd == this.password) {
                        this.flag = true;
                        break;
                    }
                }
            }
            if (this.flag) {
                localStorage.setItem("token", Date.now());
                alert("登录成功，即将进入主页");
                this.gohome();
            } else {
                alert("账号未注册，请进入注册页面注册");
                this.username = "";
                this.password = "";
                this.$router.push({
                    path: "/register",
                });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.login {
    width: 100%;
    padding: 0 15px;

    .header {
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // border: 1px solid #000;

        i {
            display: block;
            width: 20px;
            height: 20px;
            background-image: url(@/assets/chacha.png);
            background-repeat: no-repeat;
            background-size: 100%;
        }
        .goreg {
            font-size: 15px;
            color: #e0c9a0;
        }
    }

    .login_box {
        padding-top: 20px;
    }
    .login_titile {
        font-size: 18px;
        padding-bottom: 15px;
    }
    .login_from {
        .text {
            width: 100%;
            padding: 15px 0 10px;
            border-bottom: 1px solid #f0f0f0;

            span {
                padding-right: 10px;
                border-right: 1px solid #f0f0f0;
            }

            input {
                outline: 0;
                border: 0;
                padding-left: 10px;
            }
        }
        .password {
            padding: 20px 0 15px;
            border-bottom: 1px solid #f0f0f0;

            input {
                outline: 0;
                border: 0;
            }
        }
    }

    .login_btn {
        width: 100%;
        margin-top: 30px;
        text-align: center;
        border: 1px solid #f0f0f0;
        background: #ececec;
        font-size: 16px;
        color: #fff;
        padding: 10px;
        border-radius: 20px;

        &.active {
            background: #e0c9a0;
        }
    }
}
</style>
